<template>
    <div class="eduList pd14">
      <div class="eduContent">
        <div class="listTitle">
          《{{ bookName }}》
        </div>
        <ul class="listBox">
          <li class="item" v-for="(v,i) in dayNumVoList" :key="i" @click="!v.readLock && onReadBook(v, bookName)">
            <span class="day">第{{ v.sequence }}天</span>
            <span class="name">{{ v.title }}</span>
            <span class="note">
              <span v-if="v.clockInRecord" class="ka ka--active">已打卡</span>
              <span v-else class="ka">未打卡</span>
            </span>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
import { getPlanChap } from '@/api/pay'
export default {
  data(){
    return {
      bookId: this.$route.query.bookId,
      bookName: this.$route.query.bookName,
      dayNumVoList: [],
    }
  },
  created() {
    this.getData()
  },
  methods:{
    getData() {
      const { bookId } = this
      if (bookId) {
        getPlanChap(bookId).then(res => {
          this.dayNumVoList = res.data
        })
      }
    },
    onReadBook(item, bookName) {
      const { id: dayNumId, sequence: chap } = item
      let query = { dayNumId, bookName, chap }
      this.$router.push({
        path:"/payRead",
        query
      })
    }
  }
}
</script>

<style lang="less" scoped>
.eduList{
  margin-bottom:0.2rem;
  .eduContent{
    margin-top:0.1rem;
    border:1px solid #dedede;
    border-radius: 10px;
    padding:0 0.1rem;
    .listTitle{
      color:#999;
      font-size:0.12rem;
      line-height: 0.38rem;
      border-bottom:1px dashed #dedede;
    }
    .listBox{
      .item{
        display: flex;
        line-height: 0.46rem;
        border-bottom:1px solid #dedede;
        &:last-child{
          border-bottom:0;
        }
        .day{
          width:60px;
          font-size:0.12rem;
          color:#31c27c;
          &.after{
            color:#999;
          }
        }
        .name{
          flex:1;
        }
        .note{
          text-align: right;
          width: .6rem;
          .ka{
            width:100%;
            padding:0.02rem 0.1rem;
            border:1px solid #999;
            font-size:0.12rem;
            border-radius:0.15rem;
            color:#999;
          }
          .ka--active{
            color: #096dd9;
            border-color: #096dd9;
          }
        }
      }
    }
  }
}
</style>
